<template>
  <div>
    <el-main>
      <el-tabs value="first">
        <el-tab-pane label="基本信息" name="first">
          <div style="font-size: 13px;color: #333;">
            <div style="display: flex;padding: 10px;padding-top: 0;">
              <div style="flex: 1;font-weight: 700;">单号：{{dh}}</div>
              <div style="flex: 1;">仓库：{{ckmz}}</div>
              <div style="flex: 1;">采购商品种数：1</div>
              <div style="flex: 1;">已收种数：0</div>
            </div>
            <div style="display: flex;padding: 10px;">
              <div style="flex: 1;">单据状态： {{status}}</div>
              <div style="flex: 1;">采购类型：{{cg_type}}</div>
              <div style="flex: 1;">采购员/供应商：{{name}}</div>
              <div style="flex: 1;">单据来源：手动创建采购单</div>
            </div>
            <div style="display: flex;padding: 10px;">
              <div style="flex: 1;">计划采购日期：2021-10-30 23:46:40</div>
              <div style="flex: 1;">计划交货日期：{{jh_date}}</div>
              <div style="flex: 1;">排序方式：手动新增顺序</div>
              <div style="flex: 1;">制单人：{{curser}}</div>
            </div>
          </div>

          <div style="display: flex;margin-bottom: 10px;">
            <div style="margin-right: 10px;">
              <el-input placeholder="请输入内容" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <!-- <div>
              <el-button @click="initfunc">重置为默认值</el-button>
              <el-button @click="clearAlldata">清空默认数据</el-button>
            </div> -->
          </div>

          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="商品图片" prop="aa">
              <template slot-scope="scope">
                <img :src="scope.row.image_path" style="width: 50px;" alt="">
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="product_name">
            </el-table-column>
            <el-table-column label="单位" prop="unit">
            </el-table-column>
            <el-table-column label="状态" prop="aaa">
              <template slot-scope="scope">
                <div v-if="scope.row.status==1">未签收</div>
                <div v-else>已签收</div>
              </template>
            </el-table-column>
            <el-table-column label="采购价" prop="price" width="150px">
            </el-table-column>
            <el-table-column label="采购量" prop="qty" width="150px">
            </el-table-column>
            <el-table-column label="采购金额" prop="subtotal" width="150px">
            </el-table-column>
            <el-table-column label="验收单价" prop="signfor_price" width="150px">
              <template slot-scope="scope">
                <div v-if="scope.row.status==1">/</div>
                <div v-else style="color: red;">{{scope.row.signfor_price/100}}</div>
              </template>
            </el-table-column>
            <el-table-column label="验收数量" prop="signfor_qty" width="150px">
              <template slot-scope="scope">
                <div v-if="scope.row.status==1">/</div>
                <div v-else style="color: red;">{{scope.row.signfor_qty}}</div>
              </template>
            </el-table-column>
            <el-table-column label="验收金额" prop="signfor_price" width="150px">
              <template slot-scope="scope">
                <div v-if="scope.row.status==1">/</div>
                <div v-else style="color: red;">{{scope.row.signfor_subtotal/100}}</div>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks" width="150px">
            </el-table-column>
            <el-table-column label="操作" prop="aaa" width="150px">
              <template slot-scope="scope">
                <div v-if="scope.row.status==1">
                  <el-button type="text" style="font-size: 16px;" @click="checkgoodsfunc(scope.row)" >验货</el-button>
                </div>
                <div v-else  style="font-size: 16px;cursor: default;">已验货</div>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 15px;text-align: right;font-size: 20px;">
            合计含税{{total}}
          </div>
          <div style="margin-top: 30px;">
            备注:
          </div>
          <div>
            <el-input v-model="bznr" placeholder="请输入内容"></el-input>
          </div>
          <div style="margin-top: 30px;">
            <el-button @click="addfunc">保存</el-button>
            <el-button @click="funcback">返回</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>

    <el-dialog
      :title="'验收'+chekcgoods.product_name"
      :visible.sync="centerDialogVisible"
      :destroy-on-close=true
      center >
      <div style="display: flex;line-height: 40px;">
        <div style="flex:1;"></div>
        <div style="flex:1;text-align: center;">采购价格</div>
        <div style="flex:1;text-align: center;">采购量</div>
        <div style="flex:1;text-align: center;">采购金额</div>
      </div>
      <div style="display: flex;line-height: 40px;">
        <div style="flex:1;text-align: center;">原始数据</div>
        <div style="flex:1;text-align: center;">{{chekcgoods.price}}</div>
        <div style="flex:1;text-align: center;">{{chekcgoods.qty}}</div>
        <div style="flex:1;text-align: center;">{{chekcgoods.subtotal}}</div>
      </div>
      <!-- <div>{{chekcgoods}}</div> -->
      <div style="display: flex;line-height: 40px;">
        <div style="flex:1;text-align: center;padding: 0 20px;">实际数据</div>
        <div style="flex:1;padding: 0 20px;"><el-input v-model.number="chekcgoods_cgj" type="number" placeholder="请输入内容"></el-input></div>
        <div style="flex:1;padding: 0 20px;"><el-input v-model.number="chekcgoods_cgl" type="number"  placeholder="请输入内容"></el-input></div>
        <div style="flex:1;padding: 0 20px;"><el-input v-model.number="chekcgoods_cgje" type="number"  placeholder="请输入内容"></el-input></div>
      </div>
      <span slot="footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savecheck()">确定收货</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    handleActivePath
  } from '@/utils/routes'
  import {
    mapActions
  } from 'vuex'
  import {
    getList,
    getwarehouse,
    getitemlist,
    setorderitemedit
  } from '@/api/purchase/purchasenote'
  import {
    purchase_rk
  } from '@/api/purchase/purchase_rk'
  export default {
    data() {
      return {
        tableData: [],
        res:"",//存储所有信息
        cg_type: "", //采购类型
        name: "", //采购员名字
        jh_date: "", //计划交货时间
        dh: "", //单号
        curser: "", //制单人
        status: "", //状态
        id: "", //id
        remarks: "", //评论
        //total: "", //总共
        ckmz: "", //仓库名字
        bznr: "" ,//备注
        chekcgoods:"",//验货行
        chekcgoods_cgj:"",//验货采购价
        chekcgoods_cgl:"",//验货采购量
        chekcgoods_cgje:"",//验货采购金额
        centerDialogVisible:false,
      }
    },
    watch:{
      chekcgoods_cgj(val,oldval){
        if(val<0 || val == ""){
          this.chekcgoods_cgl = 0
        }
        this.chekcgoods_cgje = val * this.chekcgoods_cgl
      },
      chekcgoods_cgl(val,oldval){
        if(val<=0){
          this.chekcgoods_cgl = 1
        }
        this.chekcgoods_cgje = val * this.chekcgoods_cgj
      },
      chekcgoods_cgje(val,oldval){
        if(val<0 || val == ""){
          this.chekcgoods_cgl = 0
        }
      }
    }
    ,computed:{
      total(){
        let count = 0
        this.tableData.forEach((item)=>{
          count = count+item.subtotal
        })
        return Math.ceil(count*100)/100
      }
    }
    ,async created() {
        let id = this.$route.params.id
        let res = await getList(1, 1, {
          id
        })
        console.log("res",res);
        this.res = res.list[0]
        this.cg_type = res.list[0].type //类型
        if (res.list[0].purchaser_name) {
          this.name = res.list[0].purchaser_name //采购员名字
        } else {
          this.name = res.list[0].supplier_name
        }
        this.jh_date = res.list[0].delivery_date //时间
        this.dh = res.list[0].no //单号
        this.curser = res.list[0].cuser //制单人
        this.bznr = res.list[0].remarks //备注
        if (res.list[0].status == 1) {
          this.status = "待确认" //状态
        } else if (res.list[0].status == 2) {
          this.status = "待发货"
        } else if (res.list[0].status == 3) {
          this.status = "已收货"
        } else if (res.list[0].status == 4) {
          this.status = "已完成"
        }
        this.id = res.list[0].id //id
        this.remarks = res.list[0].remarks //
        // this.tableData = res.list
        // this.total = res.list[0].total/100 //总价
        let data = {
          id: res.list[0].warehouse_id
        }
        let wareres = await getwarehouse(data)
        this.ckmz = wareres.data.list[0].name
        await this.initfunc()
    },methods: {
      ...mapActions({
        delVisitedRoute: 'tabs/delVisitedRoute',
      }),
      async initfunc(){
        // 商品
        let shoppingmessage = await getitemlist(0, 1, this.$route.params.id)
        this.tableData = shoppingmessage.list
        this.tableData.forEach((item) => {
          item.price = item.price / 100
          item.subtotal = item.subtotal / 100
        })
       }
      ,funcback() {
        this.$confirm('确定返回列表页面?', '确定', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(async () => {
            const detailPath = await handleActivePath(this.$route, true)
            await this.$router.push('/purchase/purchasenote')
            await this.delVisitedRoute(detailPath)
          })
          .catch(() => {})
      },
      async addfunc() {
        let timestamp = Date.parse(new Date())/1000;
        let ismessage = false
        this.tableData.forEach((item)=>{
          if(item.status==1){
            ismessage = true
          }
        })
        console.log("aa",this.tableData);
        if(ismessage){
          this.$message({
            message:"请验货再保存",
            type:"error"
          })
          return
        }
        let WarehouseInputItemsList = []
        this.tableData.forEach((item)=>{
          console.log("item",item);
          let data = {
            warehouseSpaceId:item.space_id,
            warehouseAreaId:item.area_id,
            productId:item.product_id,
            qty:item.signfor_qty,
            unit:item.unit,
            price:item.signfor_price * 100,
            cuser:"a",
            uuser:"a"
          }
          WarehouseInputItemsList.push(data)
        })
        // let temp = this.tableData[0]
        let temp = this.res
        let data = {
          no: temp.no,
          warehouseId: temp.warehouse_id,
          total: this.total, //金额
          status: 2,
          supplierId: temp.supplier_id, //供应商id
          purchaserId: temp.purchaser_id, //采购人
          cuser: temp.cuser,
          ctime: temp.ctime,
          uuser: temp.uuser,
          type: temp.type,
          relativeOrderNo: temp.no,
          remarks: this.bznr,
          warehouseInputItemsList:WarehouseInputItemsList
        }
        // console.log("进来了")
        console.log(data);
        let resss = await purchase_rk(data)
        // console.log(resss);
        if(resss.status == 200){
          this.$message({
            message:"保存成功",
            type:"success"
          })
          this.$router.push('/purchase/purchasenote')
        }else{
          this.$message({
            message:"保存失败",
            type:"error"
          })
        }
      },
      // clearAlldata(){
      //   this.tableData.forEach((item)=>{
      //     item.price = 0
      //     item.qty = 1
      //     item.subtotal = 0
      //   })
      // },
      checkgoodsfunc(val){
        this.chekcgoods = val
        this.chekcgoods_cgj = this.chekcgoods.price
        this.chekcgoods_cgl = this.chekcgoods.qty
        this.chekcgoods_cgje = this.chekcgoods.subtotal
        this.centerDialogVisible = true
      },
      async savecheck(){
          // {"id":34,"qty": 6, "unit": "袋", "price": 100, "subtotal":"600", "remarks":"快ll",
          //  "timeDelivery": "2020-12-10 09:11:11", "status": 3}
          let timestamp = Date.parse(new Date())/1000;
        let data = {
          id:this.chekcgoods.id,
          unit:this.chekcgoods.unit,
          signforTime:timestamp,
          status:2,
          signforPrice:this.chekcgoods_cgj *100,
          signforQty:this.chekcgoods_cgl,
          signforSubtotal:this.chekcgoods_cgje *100
        }
        let res = await setorderitemedit(data)
        if(res.status == 200){
          this.$message({
            message:"验货成功",
            type:"success"
          })
        }else{
          this.$message({
            message:"验货失败",
            type:"error"
          })
        }
        this.initfunc()
        this.centerDialogVisible = false
      }
    },

  }
</script>

<style>
</style>
